<template>
  <div class="big_big_photo">
    <div class="top_back">
      <div class="top_go_back" :class="{opacity:isOpacity === true}">
        <div @click="goBack" class="iconfont icon-icon4"></div>
        <div @click="openSheetModal" class="iconfont icon-more"></div>
      </div>
    </div>
    <div class="big_two_photo">
      <big-two-photo></big-two-photo>
    </div>
    <div class="tab_bar_menu">
      <div :class="{tab_bar_color:getImageType === index}" @click="changeTabBarMenu(index)"
           v-for="(item,index) in tabBarMenu">{{item.title}}
      </div>
    </div>
    <!--<div>-->
    <!--<mt-actionsheet-->
    <!--:actions="actions"-->
    <!--v-model="sheetVisible">-->
    <!--</mt-actionsheet>-->
    <!--</div>-->
  </div>
</template>

<script>
  import TopGoBack from '../common/TopGoBack';
  import BigTwoPhoto from '../common/BigPhoto';
  import {buildPhoto} from '../../axios/api';
  import Vue from 'vue';
  import {Actionsheet} from 'mint-ui';

  Vue.component(Actionsheet.name, Actionsheet);
  export default {
    // props: {
    //   closeBigPhoto: {
    //     type: Function
    //   },
    //   buildPhotoList: {
    //     type: Object
    //   }
    // },
    name: 'BigPhoto',
    data() {
      return {
        sheetVisible: false,
        isOpacity: false,
        tabBarMenu: [
          {title: '效果图', name: 'xgt'},
          {title: '实景图', name: 'sjt'},
          {title: '样板图', name: 'ybt'},
          {title: '户型图', name: 'hxt'},
          {title: '交通图', name: 'jtt'}
        ],
      }
    },
    computed:{
      getImageType(){
        return this.$store.getters.getImageType;
      }
    },
    watch:{
      '$route'(to, from) {
        console.log(to.name,'to');
        // console.log(from.name,'from');
        if (to.name === 'NewHouseDetails' || to.name === 'BigPhoto' || to.name === 'BuildPhoto') {
          // this.getBuildPhotoList();
          console.log(this.getImageType,'this.getImageType');
          if (this.getImageType === 0) {
            this.$store.commit('setData', this.buildPhotoList.effect_img);
            //setName
            this.$store.commit('setName', this.buildPhotoList.effect_img[0].file_name);

          } else if (this.getImageType === 1) {
            this.$store.commit('setData', this.buildPhotoList.real_scene_img);
            //setName
            this.$store.commit('setName', this.buildPhotoList.real_scene_img[0].file_name);
          } else if (this.getImageType === 2) {

            this.$store.commit('setData', this.buildPhotoList.sample_img);
            //setName
            this.$store.commit('setName', this.buildPhotoList.sample_img[0].file_name);
          } else if (this.getImageType === 3) {

            this.$store.commit('setData', this.buildPhotoList.houseType_img);
            //setName
            this.$store.commit('setName', this.buildPhotoList.houseType_img[0].file_name);
          } else if (this.getImageType === 4) {
            this.$store.commit('setData', this.buildPhotoList.traffic);
            //setName
            this.$store.commit('setName', this.buildPhotoList.traffic[0].file_name);
          }
        }
      }
    },
    created(){
      this.getBuildPhotoList();
    },
    methods: {
      //获取楼盘照片列表数据
      getBuildPhotoList(){
        let that = this;
        buildPhoto(that.$route.params.id).then(res=>{
          console.log(res);
          that.buildPhotoList = res.data;
        }).catch(err=>{
          console.log(err);
        })
      },
      goBack() {
        this.$router.go(-1);
      },
      openSheetModal() {
        let that = this;
        that.$store.state.dialog.sheetVisibleShow = true;
      },
      changeTabBarMenu(index) {
        this.$store.commit('setImageType', index);
        if (this.getImageType === 0) {
          this.$store.commit('setData', this.buildPhotoList.effect_img);
          //setName
          this.$store.commit('setName', this.buildPhotoList.effect_img[0].file_name);

        } else if (this.getImageType === 1) {
          this.$store.commit('setData', this.buildPhotoList.real_scene_img);
          //setName
          this.$store.commit('setName', this.buildPhotoList.real_scene_img[0].file_name);
        } else if (this.getImageType === 2) {

          this.$store.commit('setData', this.buildPhotoList.sample_img);
          //setName
          this.$store.commit('setName', this.buildPhotoList.sample_img[0].file_name);
        } else if (this.getImageType === 3) {

          this.$store.commit('setData', this.buildPhotoList.houseType_img);
          //setName
          this.$store.commit('setName', this.buildPhotoList.houseType_img[0].file_name);
        } else if (this.getImageType === 4) {
          this.$store.commit('setData', this.buildPhotoList.traffic);
          //setName
          this.$store.commit('setName', this.buildPhotoList.traffic[0].file_name);
        }

      }
    },
    components: {
      TopGoBack,
      BigTwoPhoto
    }
  }
</script>

<style scoped>
  .big_big_photo {
    position: relative;
    background: #000000;
    height: 100vh;
  }

  .big_big_photo .top_back {
    position: absolute;
    width: 100%;
    left: 0;
    top: 10px;
    z-index: 99;
  }

  .big_big_photo .house_about {
    border-top: 10px solid #f8f8f8;
    /*padding: 10px;*/
  }

  .big_big_photo .big_two_photo {
    padding: 100px 0;
    /*background: #000000;*/
  }

  .big_big_photo .tab_bar_menu {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    background: #1d1d1d;
    justify-content: space-between;

  }

  .big_big_photo .tab_bar_menu > div {
    width: 25%;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }

  .tab_bar_color {
    color: #e6191e;
  }

  .top_go_back {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 1rem;
  }

  .top_go_back > div {
    background-color: #000000;
    height: 30px;
    color: #ffffff;
    line-height: 30px;
    text-align: center;
    width: 30px;
    border-radius: 50%;

  }

  .opacity {
    opacity: 0.5;
  }
</style>
